<template>
  <div>
    <component
      :is="loginType"
      :loading="loading"
      @loadingChange="loadingChange"
      @toChangePageType="changePageType"
      :operate="operate"
    ></component>
    <el-row>
      <el-col :span="12" v-if="loginType != 'MAC'">
        <el-link
          class="iba"
          type="info"
          :underline="false"
          @click="changeLoginType('MAC')"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="require('../../assets/phone.png')"
            fit="scale-down"
          ></el-image>
          <div>{{ $t("loginType.loginTypeMAC") }}</div>
        </el-link>
      </el-col>
      <el-col :span="12" v-if="loginType != 'Password'">
        <el-link
          class="iba"
          type="info"
          :underline="false"
          @click="changeLoginType('Password')"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="require('../../assets/user.png')"
            fit="scale-down"
          ></el-image>
          <div>{{ $t("loginType.loginTypePassword") }}</div>
        </el-link>
      </el-col>
      <el-col :span="12" v-if="loginType != 'Wechat'">
        <el-link
          class="iba"
          type="info"
          :underline="false"
          @click="changeLoginType('Wechat')"
        >
          <el-image
            style="width: 80px; height: 80px"
            :src="require('../../assets/wechat.png')"
            fit="scale-down"
          ></el-image>
          <div>{{ $t("loginType.loginTypeWechat") }}</div>
        </el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Password from "./Password.vue";
import MAC from "./MAC.vue";
import Wechat from "./Wechat.vue";

export default {
  name: "Login",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Password,
    MAC,
    Wechat,
  },
  data() {
    return {
      loginType: "MAC",
      operate: {
        type: "login",
        timestamp: new Date().getTime(),
      },
    };
  },
  mounted() {
    //绑定事件
    window.removeEventListener("keydown", this.keyDown, false);
    window.addEventListener("keydown", this.keyDown);
  },
  methods: {
    changePageType(type) {
      this.$emit("toChangePageType", type);
    },
    loadingChange(loading) {
      this.$emit("loadingChange", loading);
    },
    changeLoginType(type) {
      this.loginType = type;
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.operate.timestamp = new Date().getTime();
      }
    },
  },
};
</script>